<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Items</title>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery-jtemplates.js"></script>
  <link rel="stylesheet" href="style.css">

  <script type="text/javascript">
    $(document).ready(function() {
      $.getJSON('data.json', function(data) {
        var Items = data.Items;
        var Bom = Items[0].BOM; //sample data
        
        $("#ItemBOM").setTemplateElement("Template-BOM");
        $("#ItemBOM").processTemplate(Bom);
      });
    });
  </script>
</head>

<body>
  <!-- Templates -->
  <p style="display:none"><textarea id="Template-BOM" rows="0" cols="0"><!--
{*
Main template
*}
{#template MAIN}
  <b>BOM: {$T.Name}</b>
  <div>
  {#include entry root=$T.Elements}
  </div>
{#/template MAIN}

{*
Recursed subtemplate
*}
{#template entry}
  <ul>
  {#foreach $T as entry}
    <li>{$T.entry.Qty} {$T.entry.Name}</li>
    {#if $T.entry.Elements}{#include entry root=$T.entry.Elements}{#/if}
  {#/for}
  </ul>
{#/template entry}
  --></textarea></p>
  
  <!-- Output elements -->
  <div id="ItemBOM" class="Content"></div>
  
</body>
</html>
